<template>
  <div class="home" style="font-size: 18px;background-color: #f7f8fa;">
    <el-row :gutter="20">
      <el-col :sm="24" :md="8" v-hasPermi="['staging:console:order']">
        <el-card class="box-card" :style="'height:'+resizeHeight">
          <MmvTitle title="订单业务" style="background-color: #ffffff">
            <el-select v-model="orderSource"  style="width:120px" slot="btn" class="radio-right select-order" @change="getOrderData()">
              <el-option label="平台订单" value="pc"></el-option>
              <el-option label="全部订单" value="all"></el-option>
              <template v-for="dict in dict.type.ota_order_resource">
                <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
              </template>
            </el-select>
          </MmvTitle>
          <el-row :gutter="20" class="cardbox">
            <el-col :xs="12" :sm="6" :md="12" :lg="6" :xl="6" v-for="(item, index) in orderData" :key="index">
              <div class="card-item" @click="openOrderPage( item.key,item.otaKey)">
                <div class="card-panel-title">{{ item.name }}</div>
                <div class="card-panel-text">{{ item.count }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :sm="24" :md="8" v-hasPermi="['staging:console:car']">
        <el-card class="box-card" v-onresize="onresize">
          <MmvTitle title="车辆情况" style="background-color: #ffffff"></MmvTitle>
          <el-row :gutter="20" class="cardbox">
            <el-col :xs="12" :sm="8" :md="12" :lg="8" :xl="8" v-for="(item, index) in carData" :key="index">
              <div class="card-item" @click="openCarPage( item.key)">
                <div class="card-panel-title">{{ item.name }}</div>
                <div class="card-panel-text">{{ item.count }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :sm="24" :md="8" v-hasPermi="['staging:console:shortcut']">
        <el-card class="box-card" :style="'height:'+resizeHeight">
          <MmvTitle title="快捷入口" style="background-color: #ffffff"></MmvTitle>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12">
              <div class="btn-item" @click="fastEntry( '/orderBasic/add')" v-hasPermi="['order:orderBasic:add']">新增日租订单
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12">
              <div class="btn-item" @click="fastEntry( '/basic/add' )" v-hasPermi="['car:basic:add']">新增车辆
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12">
              <div class="btn-item" @click="fastEntry( '/finance/reimbursement' )">其他成本费用
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20"  v-hasPermi="['staging:console:shortcut','staging:console:alarm']">
      <el-col :span="24">
        <el-card class="box-card" xv-loading="loading" style="margin-top:10px">

          <MmvTitle :title="`告警待办(${warnList.length})`" style="background-color: #ffffff">
            <div slot="btn" class="notice-right">
              <span style="cursor: pointer" @click="goWarnMore">查看更多</span>
              <el-icon name="arrow-right"></el-icon>
            </div>
          </MmvTitle>

          <ScrollNotice v-if="warnList && warnList.length>0"></ScrollNotice>

        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8" v-hasPermi="['staging:console:days']">
        <el-card class="box-card" xv-loading="loading" style="margin-top:10px" :style="'height:'+resizeHeight">
          <MmvTitle title="出租天数排行榜" style="background-color: #ffffff">

            <el-radio-group v-model="radio1" @change="carRentalRate()" slot="btn" size="small" class="radio-right">
              <el-radio-button :label="1">本周</el-radio-button>
              <el-radio-button :label="2">本月</el-radio-button>
              <el-radio-button :label="3">本年</el-radio-button>
            </el-radio-group>
          </MmvTitle>
          <div v-for="(item,index) in carRentalRateData" :key="index">
            <div class="percentage-box">
              <div class="model-name">{{ index + 1 }}.{{ item.modelName }}</div>
              <div class="model-percentage">{{ item.rentalDays }}天</div>
            </div>
            <el-progress :percentage="item.percentage" :show-text="false" :stroke-width="6"
                         :color="colors[index]"></el-progress>
          </div>

        </el-card>
      </el-col>
      <el-col :span="8" v-hasPermi="['staging:console:orderNum']">
        <el-card class="box-card" xv-loading="loading" style="margin-top:10px" :style="'height:'+resizeHeight">
          <MmvTitle title="订单数排行榜" style="background-color: #ffffff">

            <el-radio-group v-model="radio2" @change="modelOrderRanking()" size="small" class="radio-right">
              <el-radio-button :label="1">本周</el-radio-button>
              <el-radio-button :label="2">本月</el-radio-button>
              <el-radio-button :label="3">本年</el-radio-button>
            </el-radio-group>
          </MmvTitle>

          <div v-for="(item,index) in modelOrderRankingData" :key="index">
            <div class="percentage-box">
              <div class="model-name">{{ index + 1 }}.{{ item.modelName }}</div>
              <div class="model-percentage">{{ item.total }}</div>
            </div>
            <el-tooltip placement="top">
              <div slot="content" style="font-size: 14px">
                日租订单:{{ item.shortNum }}<br/>
                月租订单:{{ item.longNum }}
              </div>
              <el-progress :percentage="item.percentage" :show-text="false" :stroke-width="6"
                           :color="colors[index]"></el-progress>
            </el-tooltip>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" v-hasPermi="['staging:console:model']">
        <el-card class="box-card" xv-loading="loading" style="margin-top:10px" :style="'height:'+resizeHeight">
          <MmvTitle title="车型收益排行榜" style="background-color: #ffffff">

            <el-radio-group v-model="radio3" @change="modelRevenueRanking()" size="small" class="radio-right">
              <el-radio-button :label="1">本周</el-radio-button>
              <el-radio-button :label="2">本月</el-radio-button>
              <el-radio-button :label="3">本年</el-radio-button>
            </el-radio-group>
          </MmvTitle>

          <div v-for="(item,index) in modelRevenueRankingData" :key="index">
            <div class="percentage-box">
              <div class="model-name">{{ index + 1 }}.{{ item.modelName }}</div>
              <div class="model-percentage">￥{{ item.total }}</div>
            </div>
            <el-tooltip placement="top">
              <div slot="content" style="font-size: 14px">
                应收:￥{{ item.payableTotal }}<br/>
                已收:￥{{ item.payTotal }}<br/>
                应退:￥{{ item.expendTotal }}<br/>
                已退:￥{{ item.disburseTotal }}<br/>
                合计:￥{{ item.total }}<br/>
              </div>
              <el-progress :percentage="item.percentage" :show-text="false" :stroke-width="6"
                           :color="colors[index]"></el-progress>
            </el-tooltip>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <el-row :gutter="20">
      <el-col :span="11" v-hasPermi="['staging:console:second']">
        <el-card class="box-card" xv-loading="loading" style="margin-top:10px">
          <MmvTitle title="借调收支统计" style="background-color: #ffffff">
            <el-date-picker class="radio-right" style="width:220px" v-model="searchTime1" @change="getToLoanData()"
                            :clearable="false" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            size="mini" unlink-panels range-separator="~" start-placeholder="开始日期"
                            end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>

          </MmvTitle>
          <el-row class="bingTu">
            <MmvECharts :key="chartKey1" :chartData="borrowDatabiao"></MmvECharts>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="13" v-hasPermi="['staging:console:flowing']">
        <el-card class="box-card" xv-loading="loading" style="margin-top:10px">
          <MmvTitle title="业务流水统计" style="background-color: #ffffff">
            <el-date-picker class="radio-right" style="width:220px" v-model="searchTime2" @change="getBillFlowData()"
                            :clearable="false" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            size="mini" unlink-panels range-separator="~" start-placeholder="开始日期"
                            end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
          </MmvTitle>
          <el-row class="bingTu">
            <el-col :span="12">
              <MmvECharts :key="chartKey2" :chartData="chaiwushourutubiao"></MmvECharts>
            </el-col>
            <el-col :span="12">
              <MmvECharts :key="chartKey2" :chartData="chaiwushourutubiao2"></MmvECharts>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24" v-hasPermi="['staging:console:expenditure']">
        <el-card class="box-card" xv-loading="loading" style="margin-top:10px">
          <MmvTitle title="订单收支统计" style="background-color: #ffffff">
            <el-date-picker class="radio-right" style="width:220px" v-model="searchTime3" @change="getOrderlist()"
                            :clearable="false" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            size="mini" unlink-panels range-separator="~" start-placeholder="开始日期"
                            end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
          </MmvTitle>
          <MmvECharts :key="chartKey3" :chartData="orderChartList"></MmvECharts>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {tenantBusiness} from '@/api/car/business'
import * as api from '@/api/index'
import {alertToDo} from '@/api/index'
import MmvECharts from '@/components/MmvUI/MmvECharts.vue'
import MmvTitle from '@/components/MmvUI/MmvTitleTip.vue'
import PanelGroup from '@/components/MmvUI/PanelGroup.vue'
import {checkPermi} from '@/utils/permission'
import ScrollNotice from '@/components/ScrollNotice'

export default {
  name: 'Index',
  components: {
    MmvECharts,
    MmvTitle,
    PanelGroup,
    ScrollNotice
  },
  dicts: ['ota_order_resource'],
  data() {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
    return {
      resizeHeight: null,
      orderType: 0,
      orderSource: 'pc',
      carRentalRateData: [],
      modelOrderRankingData: [],
      modelRevenueRankingData: [],
      colors: ["#46a9a8", "#ffab67", "#a285d2",
        "#83d0ef", "#f7c739"],
      orderData: [
        {
          key: '1',
          otaKey:'1',
          name: '全部',
          count: 0
        },
        {
          key: '4',
          otaKey:'2',
          name: '待排车',
          count: 0
        },
        {
          key: '5',
          otaKey:'3',
          name: '待取车',
          count: 0
        },
        {
          key: '6',
          otaKey:'4',
          name: '用车中',
          count: 0
        },
        {
          key: '12',
          otaKey:'9',
          name: '2小时内待取车',
          count: 0
        },
        {
          key: '14',
          otaKey:'10',
          name: '2小时内待还车',
          count: 0
        },
        {
          key: '15',
          otaKey:'11',
          name: '逾期未取车',
          count: 0
        },
        {
          key: '16',
          otaKey:'12',
          name: '逾期未还车',
          count: 0
        },
        {
          key: '11',
          otaKey:'7',
          name: '今日待取车',
          count: 0
        },
        {
          key: '13',
          otaKey:'8',
          name: '今日待还车',
          count: 0
        },
        {
          key: '111',
          otaKey:'5',
          name: '明日待取车',
          count: 0
        },
        {
          key: '131',
          otaKey:'6',
          name: '明日待还车',
          count: 0
        },
      ],
      carData: [
        {
          key: '1',
          name: '全部',
          count: 0
        },
        {
          key: '2',
          name: '自购车辆',
          count: 0
        },
        {
          key: '3',
          name: '经租车辆',
          count: 0
        },
        {
          key: '4',
          name: '在店车辆',
          count: 0
        },
        {
          key: '5',
          name: '门店调出车辆',
          count: 0
        },
        {
          key: '6',
          name: '门店调入车辆',
          count: 0
        },
        {
          key: '7',
          name: '同行借出车辆',
          count: 0
        },
        {
          key: '8',
          name: '同行借入车辆',
          count: 0
        },
        {
          key: '9',
          name: '已处置车辆',
          count: 0
        }
      ],
      tabs_list1: [
        {key: '1', name: '入账流水', number: '0条', value: 0},
        {key: '2', name: '支出流水', number: '0条', value: 0}
      ],
      tabs_list2: [
        {key: '1', name: '日租订单', number: '0条', value: 0},
        {key: '2', name: '车辆处置', number: '0条', value: 0},
        {key: '3', name: '借出车辆', number: '0条', value: 0},
        {key: '13', name: '月租订单', number: '0条', value: 0}
      ],
      tabs_list3: [
        {key: '14', name: '日租退款', number: '0条', value: 0},
        {key: '4', name: '维修支出', number: '0条', value: 0},
        {key: '5', name: '保养支出', number: '0条', value: 0},
        {key: '6', name: '保险支出', number: '0条', value: 0},
        {key: '7', name: '年检支出', number: '0条', value: 0},
        {key: '8', name: '违章支出', number: '0条', value: 0},
        {key: '9', name: '车辆借入', number: '0条', value: 0},
        {key: '10', name: '车款分期', number: '0条', value: 0},
        {key: '11', name: '费用报销', number: '0条', value: 0},
        {key: '12', name: '油卡充值', number: '0条', value: 0},
        {key: '16', name: '其他费用', number: '0条', value: 0},
        {key: '15', name: '月租退款', number: '0条', value: 0}
      ],
      chartKey1: 0,
      chartKey2: 0,
      chartKey3: 0,
      borrowData: [],
      lendData: [],
      bizType: '1',
      radio1: 2,
      radio2: 2,
      radio3: 2,
      searchTime1: [start, end],
      searchTime2: [start, end],
      searchTime3: [start, end],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '本年',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      dashboardData: {
        orderChartList: [
          {
            name: '订单',
            data: [
              {
                dateTime: '2022-04-14',
                object: 7
              },
              {
                dateTime: '2022-04-15',
                object: 5
              },
              {
                dateTime: '2022-04-16',
                object: 0
              },
              {
                dateTime: '2022-04-17',
                object: 0
              },
              {
                dateTime: '2022-04-18',
                object: 1
              },
              {
                dateTime: '2022-04-19',
                object: 1
              },
              {
                dateTime: '2022-04-20',
                object: 4
              },
              {
                dateTime: '2022-04-21',
                object: 2
              },
              {
                dateTime: '2022-04-22',
                object: 0
              }
            ]
          }
        ]
      },
      warnList:[]
    }
  },
  computed: {
    orderChartList() {
      const map = require('lodash/map')
      const orderChartList = this.dashboardData.orderChartList || []
      const xAxisData = map(orderChartList[0].data, (val) => val.dateTime)
      const seriesData = map(
        orderChartList.map((val) => {
          return {
            name: '订单',
            type: 'line',
            areaStyle: {},
            data: map(val.data, (val) => val.object)
          }
        })
      )
      const option = {
        total: this.dashboardData.orderNum,
        title: {text: ''},
        toolbox: {feature: {saveAsImage: {}}},
        tooltip: {trigger: 'axis', axisPointer: {type: 'cross', label: {backgroundColor: '#6a7985'}}},
        // legend: { data: ['订单'] },
        grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxisData || ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {type: 'value'},
        series: seriesData || [{data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', areaStyle: {}}]
      }
      return option
    },
    borrowDatabiao() {
      let total1 = 0
      this.borrowData.map((item) => {
        total1 += item.value
      })
      let total2 = 0
      this.lendData.map((item) => {
        total2 += item.value
      })
      const option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#5470c6', '#91cc75', '#b38408', '#ee6666', '#73c0de', '#0bb516', '#fc8452', '#9a60b4', '#ea7ccc', '#ed115e', '#fffb06', '#037745'],
        legend: {
          orient: 'vertical', //设置图例的方向
          right: 10,
          top: 10,
          itemGap: 10 //设置图例的间距
        },
        series: [
          {
            name: '借入车辆',
            type: 'pie',
            radius: ['35%', '65%'],
            center: ['20%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center',
              formatter: function (params) {
                return '{a|借入车辆}{b| ' + total1 + ' }{a|辆}'
              },
              rich: {
                a: {
                  color: '#999999',
                  fontSize: 14,
                  backgroundColor: 'white'
                },
                b: {
                  color: '#333333',
                  fontSize: 14,
                  backgroundColor: 'white'
                }
              }
            },
            labelLine: {
              show: false
            },
            data: this.borrowData
          },
          {
            name: '借出车辆',
            type: 'pie',
            radius: ['35%', '65%'],
            center: ['60%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center',
              formatter: function (params) {
                return '{a|借出车辆}{b| ' + total2 + ' }{a|辆}'
              },
              rich: {
                a: {
                  color: '#999999',
                  fontSize: 14,
                  backgroundColor: 'white'
                },
                b: {
                  color: '#333333',
                  fontSize: 14,
                  backgroundColor: 'white'
                }
              }
            },
            labelLine: {
              show: false
            },
            data: this.lendData
          }
        ]
      }
      return option
    },
    chaiwushourutubiao() {
      let total = this.tabs_list1[0].value
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical', //设置图例的方向
          right: 10,
          top: 10,
          itemGap: 10 //设置图例的间距
        },
        series: [
          {
            name: '收入流水',
            type: 'pie',
            radius: ['35%', '65%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center',
              formatter: function (params) {
                return '{a|收入流水}' + '\n\n' + '{b|¥' + total + '}'
              },
              rich: {
                a: {
                  color: '#999999',
                  fontSize: 14,
                  backgroundColor: 'white'
                },
                b: {
                  color: '#333333',
                  fontSize: 14,
                  backgroundColor: 'white'
                }
              }
            },
            labelLine: {
              show: false
            },
            data: this.tabs_list2
          }
        ]
      }
      return option
    },
    chaiwushourutubiao2() {
      let total = this.tabs_list1[1].value
      const option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#5470c6', '#91cc75', '#b38408', '#ee6666',
          '#73c0de', '#0bb516', '#fc8452', '#9a60b4',
          '#ea7ccc', '#f7c739', '#fffb06', '#037745'],
        legend: {
          orient: 'vertical', //设置图例的方向
          right: 10,
          top: 10,
          itemGap: 10 //设置图例的间距
        },
        series: [
          {
            name: '支出流水',
            type: 'pie',
            radius: ['35%', '65%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center',
              formatter: function (params) {
                return '{a|支出流水}' + '\n\n' + '{b|¥' + total + '}'
              },
              rich: {
                a: {
                  color: '#999999',
                  fontSize: 14,
                  backgroundColor: 'white'
                },
                b: {
                  color: '#333333',
                  fontSize: 14,
                  backgroundColor: 'white'
                }
              }
            },
            labelLine: {
              show: false
            },
            data: this.tabs_list3
          }
        ]
      }
      return option
    }
  },
  mounted() {
    this.zoom()
    // 窗口大小变化时，需要重算
    // window.addEventListener('resize', this.zoom, false)

    tenantBusiness().then((response) => {
      this.tenantBusinessArr = response.data || []
      this.bizType = '1'
    })
    // this.getData(true);
    // this.getBillFlowCount();

    this.getOrderData()
    this.getCarData()
    this.getToLoanData()
    this.getBillFlowData()
    this.getOrderlist()
    this.carRentalRate()
    this.modelOrderRanking()
    this.modelRevenueRanking()
    if (checkPermi(['car:alarm:list'])) {
      this.getWarnList()
    }

  },
  // destroyed() {
  //   window.removeEventListener('resize', this.zoom, false)
  // },
  methods: {
    getWarnList(){
      alertToDo().then(result =>{
        this.warnList = result.data.carAlarmData
      })
    },
    onresize({width, height}) {
      this.resizeHeight = height
    },
    zoom() {
      let domBody1 = document.getElementsByClassName('bingTu')[0]
      domBody1.style.zoom = document.body.clientWidth / 22 + '%'
      let domBody2 = document.getElementsByClassName('bingTu')[1]
      domBody2.style.zoom = document.body.clientWidth / 22 + '%'
    },
    checkPermi,
    async getOrderData() {
      let queryForm = {
        orderSource: this.orderSource
      }
      if(this.orderSource=='all'){
        queryForm.orderType=0
      }else if(this.orderSource=='pc'){
        queryForm.orderType=1
      }else {
        queryForm.orderType=2
      }

      const response = await api.getOrderData(queryForm)
      let orderCount = response.data
      this.orderData = [
        {
          key: '1',
          otaKey:'1',
          name: '全部',
          count: orderCount.allOrder
        },
        {
          key: '4',
          otaKey:'2',
          name: '待排车',
          count: orderCount.pc
        },
        {
          key: '5',
          otaKey:'3',
          name: '待取车',
          count: orderCount.qc
        },
        {
          key: '6',
          otaKey:'4',
          name: '用车中',
          count: orderCount.yc
        },
        {
          key: '12',
          otaKey:'9',
          name: '2小时内待取车',
          count: orderCount.twohqc
        },
        {
          key: '14',
          otaKey:'10',
          name: '2小时内待还车',
          count: orderCount.twohhc
        },
        {
          key: '15',
          otaKey:'11',
          name: '逾期未取车',
          count: orderCount.yqwq
        },
        {
          key: '16',
          otaKey:'12',
          name: '逾期未还车',
          count: orderCount.yqwh
        },
        {
          key: '11',
          otaKey:'7',
          name: '今日待取车',
          count: orderCount.jrqc
        },
        {
          key: '13',
          otaKey:'8',
          name: '今日待还车',
          count: orderCount.jrhc
        },
        {
          key: '111',
          otaKey:'5',
          name: '明日待取车',
          count: orderCount.tomorrowTakeCar
        },
        {
          key: '131',
          otaKey:'6',
          name: '明日待还车',
          count: orderCount.tomorrowReturnCar
        }
      ]
    },
    async getCarData() {
      const response = await api.getCarData({})
      let carCount = response.data
      this.carData = [
        {
          key: '1',
          name: '全部',
          count: carCount.qb || 0
        },
        {
          key: '2',
          name: '自购车辆',
          count: carCount.zg || 0
        },
        {
          key: '3',
          name: '经租车辆',
          count: carCount.jz || 0
        },
        {
          key: '4',
          name: '在店车辆',
          count: carCount.zd || 0
        },
        {
          key: '5',
          name: '门店调出车辆',
          count: carCount.dc || 0
        },
        {
          key: '6',
          name: '门店调入车辆',
          count: carCount.dr || 0
        },
        {
          key: '7',
          name: '同行借出车辆',
          count: carCount.jc || 0
        },
        {
          key: '8',
          name: '同行借入车辆',
          count: carCount.jr || 0
        },
        {
          key: '9',
          name: '已处置车辆',
          count: carCount.cz || 0
        }
      ]
    },
    async getToLoanData() {
      let queryForm = {
        bizType: this.bizType || 1,
        startTime: this.$parseTime(this.searchTime1[0], '{y}-{m}-{d}'),
        endTime: this.$parseTime(this.searchTime2[1], '{y}-{m}-{d}')
      }
      const response = await api.getToLoanData(queryForm)
      this.borrowData = response.data.borrowData || []
      this.lendData = response.data.lendData || []
      this.chartKey1++
    },
    async getBillFlowData() {
      let queryForm = {
        bizType: this.bizType || 1,
        startTime: this.$parseTime(this.searchTime2[0], '{y}-{m}-{d}'),
        endTime: this.$parseTime(this.searchTime2[1], '{y}-{m}-{d}')
      }
      const response = await api.getBillFlowData(queryForm)
      let flowCount = response.data
      this.tabs_list1 = [
        {
          key: '1',
          name: '入账流水',
          number: flowCount.count0 + '条',
          value: flowCount.num0
        },
        {
          key: '2',
          name: '支出流水',
          number: flowCount.count00 + '条',
          value: flowCount.num00
        }
      ]
      this.tabs_list2 = [
        {
          key: '1',
          name: '日租订单',
          number: flowCount.count1 + '条',
          value: flowCount.num1
        },
        {
          key: '2',
          name: '车辆处置',
          number: flowCount.count2 + '条',
          value: flowCount.num2
        },
        {
          key: '3',
          name: '借出车辆',
          number: flowCount.count3 + '条',
          value: flowCount.num3
        },
        {
          key: '13',
          name: '月租订单',
          number: flowCount.count13 + '条',
          value: flowCount.num13
        }
      ]
      this.tabs_list3 = [
        {
          key: '14',
          name: '日租退款',
          number: flowCount.count14 + '条',
          value: flowCount.num14
        },
        {
          key: '4',
          name: '维修支出',
          number: flowCount.count4 + '条',
          value: flowCount.num4
        },
        {
          key: '5',
          name: '保养支出',
          number: flowCount.count5 + '条',
          value: flowCount.num5
        },
        {
          key: '6',
          name: '保险支出',
          number: flowCount.count6 + '条',
          value: flowCount.num6
        },
        {
          key: '7',
          name: '年检支出',
          number: flowCount.count7 + '条',
          value: flowCount.num7
        },
        {
          key: '8',
          name: '违章支出',
          number: flowCount.count8 + '条',
          value: flowCount.num8
        },
        {
          key: '9',
          name: '车辆借入',
          number: flowCount.count9 + '条',
          value: flowCount.num9
        },
        {
          key: '10',
          name: '车款分期',
          number: flowCount.count10 + '条',
          value: flowCount.num10
        },
        {
          key: '11',
          name: '费用报销',
          number: flowCount.count11 + '条',
          value: flowCount.num11
        },
        {
          key: '12',
          name: '油卡充值',
          number: flowCount.count12 + '条',
          value: flowCount.num12
        },
        {
          key: '16',
          name: '其他费用',
          number: flowCount.count16 + '条',
          value: flowCount.num16
        },

        {
          key: '15',
          name: '月租退款',
          number: flowCount.count15 + '条',
          value: flowCount.num15
        }
      ]

      this.chartKey2++
    },
    async getOrderlist() {
      let queryForm = {
        bizType: this.bizType || 1,
        startTime: this.$parseTime(this.searchTime3[0], '{y}-{m}-{d}'),
        endTime: this.$parseTime(this.searchTime3[1], '{y}-{m}-{d}')
      }
      const response = await api.getOrderlist(queryForm)
      this.dashboardData = response.data
      this.chartKey3++
    },

    goWarnMore(){
      this.$router.push({path:'/riskManagement/warn'})
    },

    async carRentalRate() {
      let queryForm = {
        dateType: this.radio1 || 2
      }
      const response = await api.carRentalRate(queryForm)
      this.carRentalRateData = response.data || []
      let max = 100;
      max = this.carRentalRateData[0]?.rentalDays || 100;
      this.carRentalRateData.map(i => {
        i.percentage = i.rentalDays / max * 100
      })
    },
    async modelOrderRanking() {
      let queryForm = {
        dateType: this.radio2 || 2
      }
      const response = await api.modelOrderRanking(queryForm)
      this.modelOrderRankingData = response.data || []
      let max = 100;
      max = this.modelOrderRankingData[0]?.total || 100;
      this.modelOrderRankingData.map(i => {
        i.percentage = i.total / max * 100
      })
    },
    async modelRevenueRanking() {
      let queryForm = {
        dateType: this.radio3 || 2
      }
      const response = await api.modelRevenueRanking(queryForm)
      this.modelRevenueRankingData = response.data || []
      let max = 100;
      max = this.modelRevenueRankingData[0]?.total || 100;
      this.modelRevenueRankingData.map(i => {
        i.percentage = i.total / max * 100
      })
    },

    goTarget(href) {
      window.open(href, '_blank')
    },
    fastEntry(path) {
      this.$router.push({path: path})
    },
    openOrderPage(key,otaKey) {
      if(this.orderSource!="all"){
        if(this.orderSource=="pc"){
          if (checkPermi(['order:orderBasic:list'])) {
            this.$router.push({path: '/order/order', query: {key: key}})
          }
        }else{
          if (checkPermi(['ota:ctrip:list'])) {
            this.$router.push({path: '/ota/ctripr', query: {key: otaKey,orderSourceCode:this.orderSource}})
          }
        }
      }
    },
    openCarPage(key) {
      if (key == 9) {
        if (checkPermi(['management:management:list'])) {
          this.$router.push({path: '/car/management'})
        }
      } else {
        if (checkPermi(['car:basic:list'])) {
          this.$router.push({path: '/car/car_basic', query: {key: key}})
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.card-item {
  text-align: center;
  margin-top: 20px;
  display: inline-block;
  width: 100%;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #dddddd;
  font-size: 14px;
}

.card-item:hover {
  color: #ffffff !important;
  cursor: pointer;
  background: linear-gradient(270deg, #8dabf5 0%, #5473e8 100%) !important;
  // border-color: #1890ff;
  .card-panel-text {
    padding-bottom: 5px;
    font-size: 14px;
    color: #ffffff;
  }
}

.btn-item {
  text-align: center;
  margin-top: 20px;
  display: inline-block;
  width: 100%;
  background: #ffffff;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #dddddd;
  font-size: 14px;
}

.btn-item:hover {
  color: #ffffff !important;
  cursor: pointer;
  background: linear-gradient(270deg, #8dabf5 0%, #5473e8 100%) !important;

  .card-panel-text {
    padding-bottom: 5px;
    font-size: 14px;
    color: #ffffff;
  }
}

.cardbox {
  min-height: 260px !important;
}

.card-panel-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 33px;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
}

.card-panel-text {
  padding-bottom: 5px;
  font-size: 14px;
}

.mmv-title {
  padding: 0 !important;
}

@media screen and (max-width: 992px) {
  .box-card {
    margin-bottom: 12px;
  }
}

.percentage-box {
  font-size: 14px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 0;
}

.radio-right {
  position: absolute;
  right: 10px;
}

.notice-right {
  position: absolute;
  right: 10px;
  font-size: 14px;
  color: #666;
}



</style>

<style scoped>
/deep/ .line {
  margin-top: 10px !important;
}

/deep/ .title {
  line-height: 2 !important;
}

/deep/ .select-order .el-input--medium .el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
}
</style>
